<ol><ul><li>：項目のリスト表示

概要

＜ol＞タグ

・順序付きリスト（通常：番号付きリスト）

＜ul＞タグ

・順序なしリスト（通常：行頭記号付きリスト）

＜li＞タグ

・リストの項目を表す

属性の解説

＜ol＞タグ用

reversed属性：降順の順序になる

＜ol reversed(そのまま指定。)＞

書き方

<ol reversed>・・・ここに注目
    <li>ごはん</li>
    <li>味噌汁</li>
    <li>かぼちゃの煮つけ</li>
</ol>

表示イメージ

1. ごはん
2. 味噌汁
3. かぼちゃの煮つけ

start属性：初期開始値の指定

＜ol start="4"(初期開始値)＞

書き方

<ol start="100" >・・・ここに注目！！
    <li>パン</li>
    <li>ステーキ</li>
    <li>コーンスープ</li>
</ol>

表示イメージ

100. パン
101. ステーキ
102. コーンスープ

＜start＞＜reversed＞タグ指定時

書き方

<ol start="100" reversed>・・・ここに注目！！
    <li>パン</li>
    <li>ステーキ</li>
    <li>コーンスープ</li>
</ol>

表示イメージ

100. パン
101. ステーキ
102. コーンスープ

<使い方

＜ol＞＜li＞タグ：番号付きリスト

書き方

<ol>
    <li>キャンディ</li>
    <li>チョコレート</li>
    <li>クッキー</li>
    <li>ホットケーキ</li>
    <li>アイスクリーム</li>
</ol>

表示イメージ

1. キャンディ
2. チョコレート
3. クッキー
4. ホットケーキ
5. アイスクリーム

＜ul＞＜li＞タグ：番号なしリスト

書き方

<ul>
    <li>キャンディ</li>
    <li>チョコレート</li>
    <li>クッキー</li>
    <li>ホットケーキ</li>
    <li>アイスクリーム</li>
</ul>

表示イメージ

• キャンディ
• チョコレート
• クッキー
• ホットケーキ
• アイスクリーム

＜ol＞＜ul＞＜li＞タグ：番号付き＋番号なしリスト

書き方

<ol>
    <li>キャンディ</li>
    <li>チョコレート</li>
    <ul>
        <li>クッキー</li>
        <li>ホットケーキ</li>
    </ul>
    <li>アイスクリーム</li>
</ol>

表示イメージ

1. キャンディ
2. チョコレート
• クッキー
• ホットケーキ
3. アイスクリーム

語源

＜ol＞タグ

ordered list

読み方：オーダーリスト

意　味：順序付きのリスト

＜ul＞タグ

unordered list

読み方：アンオーダードリスト

意　味：順序のないリスト

＜li＞タグ

List item

読み方：リストアイテム

意　味：リストの項目

参考

【MDN Web Docs】<ol>タグ：番号付きリスト

【MDN Web Docs】<ul>タグ：番号なしリスト

【MDN Web Docs】<li>タグ：リストの項目